<template>
	<page  ref='page' top='100rpx'>
		<!-- 建材城 wwl-->
		<view class="page">
			<!-- <view :class="isTop ? '' :'tabber1'" class="tabber">
				<view class="tabber_box">
					<view class="tabber_box_flex" :style="{ height: `${getters.statusBarHeight}px` }"></view>
				</view>
				<view class="tabber_box_title_flex" :style="{ top: `${getters.statusBarHeight}px` }">
					<view class="text">
						品牌馆
					</view>
				</view>
			</view> -->
			<!-- 20220111 暂时去掉 -->
			<!-- <view class="address_box" @click="getLocation()" >
				<view class="city">
					{{getters.currentArea ? getters.currentArea.cityName : '请设置区域'}}
				</view>
				<image src="../static/img/orientation1.png" mode="" class="img"></image>
			</view> -->
			<!-- 上背景图 -->
			<view class="banner_box" >
				<image src="https://tuzhuang-1304727035.cos.ap-beijing.myqcloud.com/uploads/images/beijintu.png" mode="scaleToFill"  class="image"></image>
				<view class="image2">
					<view class="text1">基础主材</view>
					<view class="text2">好的主材尽在图装平台</view>
				</view>
			</view>
			
			<!-- 上店铺头像等 -->
			<view class="shop_box" v-if="pinpai_list && pinpai_list.length > 0">
				<view class="row" v-for='(item,index) in pinpai_list' :key='index' @click="onShop(item)">
					<image :src="item.avatar" mode="scaleToFill" class="shopxiaimg"></image>
					<view class="text">{{item.name}}</view>
				</view>
			</view>
			<view class="shop_box2" v-if="pinpai_list.length == 0">
				当前没有基材推荐店铺
			</view>
			
			<!-- 超值推荐 -->
			<view class="shopgoods_box" >
				<view class="neibianju" >
					<view class="row1" >
						<view class="text">超值推荐</view>
						<view class="text1">折上再折  一降到底</view>
						<view class="text2" @click="onShop(pinpai_list[0])">查看更多></view>
					</view>
					<view class="row2" v-if="pinpai_list && pinpai_list.length > 0" v-for='(item,index) in pinpai_list' :key='index' >
						<view class="row4" v-if="pinpai_list && pinpai_list.length > 0" v-for='(val,key) in item.goods' :key='key' @click="onDetail(val)">
							<image :src="val.cover" mode="scaleToFill" class="shopxiaimg"></image>
							<view class="text">{{val.amount_x}}</view>
							
						</view>
						
					</view>
					<view class="row3" v-if="pinpai_list.length == 0" >
						<view class="text">当前没有推荐商品</view>
					</view>
				</view>
			</view>
			
			
			<!-- 分类 -->
			<!-- <view class="quick_box1" >
				<image src="" mode="scaleToFill"></image>
			</view> -->
			<view class="quick_box" v-if='quickList && quickList.length > 0'>
				<view class="row" v-for='(item,index) in quickList' :key='index' @click="onTypePage(item.name,item.id)">
					<image :src="item.avatar" mode="scaleToFill"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
			<!-- 大牌显示 -->
			<view class="classification_box">
				<!-- <view class="tab_row2">
					<tabRow2  ref='tabs' :tabList='tabList' type='2' @change='changeTabs' />
				</view> -->
				<view class="row1">
					<view class="text">大牌商城</view>
					<!-- <view class="text2" @click="onTypePage()">查看更多></view> -->
				</view>
				<!-- 建材城商城商品 -->
				<scroll-view  style='height:100%' enableBackToTop="true" scroll-y="true" @scrolltolower="loadMore" v-if='total != 0' >
					<view class="list_box">
						<block  v-if='total != 0'>
							<renovationShop v-for='(row,index) in list' :key='index' :row='row' status='shop' type='buildingMaterialsCity' :duihuan='0' :offer='offer'/>
							<loadingText :type="loading || page * size < total" />
						</block>
						
					</view>
				</scroll-view>
				
				<!-- <view class="list_box" v-if='total != 0 && tabActive > 0' >
					<renovation-row :list='classificationList' status='shop'  :page='page' :size='size' :duihuan='duihuan' :type=' tabActive == 1 ? "decorationMoneyExchange" :"marketingCampaign"'/>
					<loadingText :type="loading || page * size < total" />
				</view> -->
				<empty  :status='2' v-else-if='total == 0 && !loading  && tabActive > 0'/>
			</view>
			<foot/>
			<!-- <tabbar ref='tabbar' active='2'/> -->
		</view>
	</page>
</template>

<script>
	import  { getbuildingMaterialsCityType,getHomeCarousel,getbuildingMaterialsCitysGoodsList,getCityName } from "@/utils/getRequest.js"
	import {getJCCGoodsNav,getJCCGoodsList,getlabelshopList,getDGGoodsList,getShopList} from "../static/api.js"
	import tabRow2 from '@/components/tab-row2.vue'
	import renovationRow from '@/components/renovation-row.vue'
	import tabbar from '@/components/tabbar.vue'
	import  renovationShop  from "@/components/renovation-shop.vue"
	export default {
		components:{tabbar,tabRow2,renovationRow,renovationShop},
		data(){
			return{
				isTop:false,
				bannerActive: 0,
				bannerList: [],
				quickList:[],
				tabList:[],
				tabActive:1,
				classificationList:[],
				classificationLists:[],
				page:1,
				size: 10,
				total:0,
				// currentArea:null,
				loading:false,
				list:[],
				
				pinpai_status:0,
				
				pinpai_list:[],
				fucai_list:[],
				pinpai_page:1,
				pinpai_size: 10,
				pinpai_total:0,
				
				type:'buildingMaterialsCity',
				status:'shop',
				source:0,
				yunshop:0,
				shouquan:0,
				shopaid:0,
				offer:'',
				duihuan:0,//为1不让加入精算单
			}
		},
		onPullDownRefresh(){
			this.page = 1
			this.getQuickList()
			this.getList()
		},
		onReachBottom(){
			if(this.page * this.size >= this.total || this.loading) return
			this.page ++
			this.getList()
		},
		watch: {
			currentAddress(x) {
				this.page = 1
				this.getList()
			}
		},
		onPageScroll(res) {
			this.isTop = res.scrollTop > 300 ? true :false
		},
		methods:{
			onShop(row){
				console.log(row, '传过来的数据');
				if(this.type == 'buildingMaterialsCity' ||　this.type == 'cloudFactory'){
					// 跳转到店铺
					uni.navigateTo({
						url:`/pagesCommodity/shopDetailsBuilding?id=${row.id}&name=${encodeURIComponent(row.name)}&offer=${this.offer}&source=${this.source}&duihuan=${this.duihuan}&shouquan=${this.shouquan}&yunshop=${this.yunshop}`
					})
				}else{
					uni.navigateTo({
						url:`/pagesCommodity/shopDetailsDefault?type=${this.type}&id=${row.id}&name=${encodeURIComponent(row.name)}&source=${this.source}&offer=${this.offer}&duihuan=${this.duihuan}&shouquan=${this.shouquan}&yunshop=${this.yunshop}`
					})
				}
			},
			onDetail(row) {
				if (!this.$store.state.userInfo) {
					console.log(this.$store.state.userInfo,'登录');
					uni.showToast({
						title: '当前未登录，无法查看商品详情',
						duration: 2000,
						icon:'none'
					});
					return;
				}
				
				
				
				uni.navigateTo({
					url: `/pagesCommodity/information?id=${row.id}&type=${this.type}&source=${this.source}&offer=${this.offer}&duihuan=${this.duihuan}&shopaid=${this.shopaid}&yunshop=${this.yunshop}`
				})
						
						
					
				
						
			},
			
			
			citySelete() {
				uni.navigateTo({
					url: '/pagesHome/city'
				});
			},
			onTypePage(name,id){
				console.log(name,id,'-----------------------');
				uni.navigateTo({
					url:`/pagesCommodity/classification?type=${id}&typeName=${encodeURIComponent(name)}&jiacan=1`
				})
			},
			async getQuickList(){
				uni.showLoading()
				this.loading = true
				try{
					var res = await getbuildingMaterialsCityType()
					this.quickList = res
				}catch{
					uni.hideLoading()
					this.loading = false
				}
			},
			onSwiperDetail(id){
				if(!id) return
				uni.navigateTo({
					url: '/pagesHome/richTextDetails?id=' + id + '&type=swiperDetail' 
				})
			},
			changeTabs(c){
				this.tabActive = c
				this.page = 1
				if(c == 0){
					this.getList()
				}else{
					this.getClassificationList()
				}
			    
			},
			intervalChange(e) {
				this.bannerActive = e.detail.current
			},
			async onGetBannerList() {
				try{
					var res = await getHomeCarousel({status:2,zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : ''})
					this.bannerList = res
					this.getTabList()
				}catch{}
			},
			async getTabList(){
				try{
					var res = await getJCCGoodsNav()
					console.log(res,'分类');
					// res.unshift(["id":0,"name":'建材城']);
					
					this.tabList = res
					this.$refs.tabs.active = 0
					this.changeTabs(0)
				}catch{}
			},
			async getList(){
					this.loading = true;
					if(this.page == 1) uni.showLoading() 
					
					// if(this.jiacan){						
					// 		var res = await getShopList({
					// 			type:this.jiacan,
					// 			page:this.page,limit:this.size,
					// 			build_city_nav_id:this.type,
					// 			build_city_id:this.tabActive,
					// 			title:this.title,
					// 			zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : '',
					// 			user_id: this.offer == 2  && this.$store.state.chat_to ? this.$store.state.chat_to.id : ''
					// 		})
					// }else{
							var res = await getShopList({
								jiancai:1,
								page:this.page,limit:this.size,
								// build_city_nav_id:this.tabActive,
								// build_city_id:this.type,
								// title:this.title,
								zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : '',
								user_id: this.offer == 2  && this.$store.state.chat_to ? this.$store.state.chat_to.id : ''
							})
					// }
					this.list =  this.page == 1 ? res.list : [...this.list,...res.list],
					console.log(this.list, '商品列表');
					this.total = res.count
					this.loading = false
					
					if(res.shopcount < 1){
						uni.showToast({title:'您的档案地址服务商家不足1个，已为您展示其他服务商家',icon:'none',duration:2000})
					}
					
					if(this.page == 1) uni.hideLoading() 
				
			},
			//获取品牌馆跟辅材馆店铺跟商品
			async getlabelshopList(){
					this.loading = true;
					if(this.pinpai_page == 1) uni.showLoading() 
					
					var res = await getlabelshopList({
						shop_label:3,
						page:this.pinpai_page,limit:this.pinpai_size,
						zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : ''
					})
					console.log(res.list, '品牌馆');
					this.pinpai_list =  this.pinpai_page == 1 ? res.list : [...this.pinpai_list,...res.list],
					console.log(this.pinpai_list, '软装馆');
					
					
					
					this.pinpai_total = res.count
					this.loading = false
					
					// if(res.shopcount < 1){
					// 	uni.showToast({title:'您的档案地址服务商家不足1个，已为您展示其他服务商家',icon:'none',duration:2000})
					// }
					
					if(this.pinpai_page == 1) uni.hideLoading() 
				
			},
			async getClassificationList(){
				if(this.page == 1)  uni.showLoading()
				this.loading = true
				try{
					if(this.tabActive == 0){
						this.getList()
					}else if(this.tabActive == 1){
						var res = await getDGGoodsList({page:this.page,limit:this.size,jiancai:1,zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : ''})
						
						
						// var listduih = res.listduihuan;
						// if(listduih){
						// 	listduih.forEach((v,vi)=>{
						// 		console.log(v,'兑换前12');console.log(vi,'兑换前133');
						// 	})
							
						// 	var ress = listduih.map(function (item,index,ary ) { 
								
						// 		console.log(item,'兑换前11');console.log(index,'兑换前212');console.log(ary,'兑换前145');
						// 		var shuzu = [];
						// 		if(item.goods.length > 0){
									
						// 		}
						// 	    return item*10; 
						// 	});
							
							this.classificationLists  = this.page == 1 ?  res.listduihuan : [...this.classificationLists,...res.listduihuan],
							
							console.log(res,'兑换前');
						// }
						
					}else{
						var res = await getJCCGoodsList({page:this.page,limit:this.size,zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : '',type:this.tabActive})
					}
					this.classificationList  = this.page == 1 ?  res.list : [...this.classificationList,...res.list],
					
					
					
					
					this.total = res.count
					this.loading = false
					
					if(this.page == 1)  uni.hideLoading()
					uni.stopPullDownRefresh()
				}catch{
					uni.hideLoading()
					this.loading = false
					uni.stopPullDownRefresh()
				}
			},
			
		
		},
		
		onLoad(params){
			console.log(this.duihuan,'兑换2');
			this.getQuickList()
			this.onGetBannerList()
			this.getlabelshopList()
			this.getList()
			
		}
	}
</script>

<style lang="scss" scoped>
	.shop_box{
		position: absolute;
		top: 240rpx;
		white-space: nowrap;
		padding-bottom: 10px;
		    overflow-x: auto;
		    width: 100%;
		.row{
			width: 60px;
			    height: 60px;
			    display: inline-block;
			    background: #fff;
			    border-radius: 10px;
			    box-shadow: 0px 2px 5px 1px #ffdc83;
			    padding: 10px 10px;
			    margin-left: 24px;
		}
		.shopxiaimg{
			width: 100%;
			    height: 70%;
		}
		.text{
			font-size: 12px;
			    white-space: nowrap;
			    text-overflow: ellipsis;
			    overflow: hidden;
		}
		
	}
	.shop_box2{
		text-align: center;
		position: absolute;
		top: 240rpx;
		white-space: nowrap;
		    overflow-x: auto;
		    width: 100%;
		    color: #fff;
		    margin-top: 10px;
	}
	
	.shopgoods_box{
		position: absolute;
		top: 404rpx;
		width: 100%;
		.neibianju{
			height: 150px;
			    margin: 10px 24px;
			    box-shadow: 0px 2px 5px 1px #ffdc83;
			    border-radius: 8px;
		}
		.row1{
			padding: 8px 16px;
			
			.text{
				font-size: 18px;
				    font-weight: 900;
				    display: inline-block;
					margin-right: 10px;
			}
			.text1{
				font-size: 12px;
				    display: inline-block;
				    color: #fea722;
			}
			.text2{
				font-size: 12px;
				    display: inline-block;
					text-align: right;
					    width: 33%;
			}
		}
		.row2{
			display: flex;
			height: 90px;
			padding: 10px 10px;
			.row4{
				flex: 0 0 30%;
				margin: 0 auto;
			}
			.shopxiaimg{
				width: 100%;
				    height: 70%;
			}
			.text{
				text-align: center;
				font-size: 15px;
				    color: #ff9b03;
				    font-weight: 600;
			}
		}
		.row3{
			text-align: center;
			    line-height: 102px;
		}
		
		.shopxiaimg{
			width: 100%;
			    height: 70%;
		}
		
		
	}
	
	.xiazx{
		padding: 10px 16px;
		.row{
			border-top: 1px solid #dcdcdc;
			padding: 10px 0px;
			.left{
				width: 50%;
				text-align: left;
				font-size: 16px;
				font-weight: 600;
				display: inline-block;
			}.right{
				width: 50%;
				text-align: right;
				font-size: 12px;
				line-height: 18px;
				display: inline-block;
			}
		}
		.imgssname{
			.banner{
				width: 100%;
				height: 420rpx;
				
			}
			.bann2{
				display: flex;
				    justify-content: space-between;
			}
			.kong{
				// margin-right: 20rpx;
			}
			.item{
				width: 262rpx;
				// display: inline-block;
				margin-top: 10rpx;
				margin-left: 10rpx;
				margin-right: 10rpx;
				// flex: 1;
				
			}
			.goods_name{
				font-size: 24rpx;
				white-space: nowrap;
				text-overflow:ellipsis;
				overflow:hidden;
				display: block;
			}
			.jingyan{
				line-height: 12px;
				font-size: 20rpx;
				display: flex;
				justify-content: space-between;
				.congy{
					white-space: nowrap;
					text-overflow:ellipsis;
					overflow:hidden;
					display: inline-block;
					width: 154rpx;
					
				}
				.dianzan{
					
				}
				.dianzanimg{
					width: 20rpx;
					height: 20rpx;
				}
			}
			.imgtil{
				width: 100%;
				height: 330rpx;
				border-radius: 10px;
				box-shadow: 0px 1px 5px #4a4a4a;
			}
		}
	}
	
	.address_box{
		position: fixed;
		z-index: 99;
		left: 36rpx;
		top: 60px;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 28px;
		background-color: rgba(0,0,0,0.5);
		.city {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #ffffff;
			max-width: 300rpx;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
			word-break: break-all;
		}
		image {
			width: 24rpx;
			height: 24rpx;
			margin-left: 8rpx;
		}
	}
	.tabber{
		transition: all 0.8s;
	}
	.tabber1{
		opacity: 0;
	}
	.tabber_box .tabber_box_flex {
		width: 100%;
		background-color: #fff;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
	}
	.tabber_box_title_flex {
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99999;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 42rpx;
		text-align: center;
		color: #000;
		font-weight: 700;
		// .left {
		// 	position: absolute;
		// 	left: 40rpx;
		// 	top: 50%;
		// 	transform: translateY(-50%);
		// }
	}
	
	// 轮播图
	.banner_box {
		position: relative;
		width: 100%;
		height: 330rpx;
		.image{
			top: -140rpx;
			width: 100%;
			position: absolute;
		}
		.image2{
			top: 17%;
			left: 48rpx;
			width: 100%;
			height: 45%;
			position: absolute;
			color: #fff;
			.text1{
				font-size: 25px;
				font-weight: 700;
			}
			.text2{
				font-size: 12px;
			}
		}
		
		
		.swiper_option{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 80rpx;
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;
			.icon{
				display: inline-block;
				width: 12rpx;
				height: 12rpx;
				background: #ebebeb;
				border-radius: 12rpx;
				margin-right: 12rpx;
				&:last-child{
					margin-right: 0;
				}
			}
			.active_icon{
				width: 30rpx;
				transition: 0.5s all ;
			}
		}
	}
	.banner {
		width: 100%;
		height: 506rpx;
		.swiper_item {
			position: relative;
			width: 100%;
			height: 506rpx;
			.image {
				width: 100%;
				height: 506rpx;
			}
		}
	}
	.quick_box{
		display: flex;
		margin-top: 372rpx;
		padding:20rpx 20rpx 0;
		box-sizing: border-box;
		width: 100%;
		justify-content: space-between;
		flex-wrap: wrap;
		.row{
			flex:25%;
			padding-top:48rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 24rpx;
				// border-radius: 50%;
				
			}
			text{
				color:#26252B;
				line-height: 36rpx;
				font-size: 26rpx;
			}
		}
	}
	.classification_box{
		padding: 50rpx 36rpx;
		box-sizing: border-box;
		width: 100%;
		.row1{
			display: flex;
			.text{
				flex: 0 0 50%;
				font-size: 18px;
				    font-weight: 600;
			}
			.text2{
				flex: 0 0 50%;
				text-align: right;
				font-size: 12px;
			}
		}
		.tab_row2{
			padding: 30rpx 0 15rpx;
			width: 100%;
		}
	}
	
	
</style>
